import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Link from 'rax-link';
import TextInput from 'rax-textinput';

function Window() {

    const [address, setAdress] = useState('');
    const [title, setNewTitle] = useState('');

    //初始化jsbridge
    const excuteBridge = () => {
    
        windowZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
          console.log('执行初始化方法 -----中台');
        })
      }

      //设置窗口标题
    const setTitle = () => {
        excuteBridge();

        console.log('*******  begin setTitle() title:  ' + title +'   ,*******');
        
        ZWJSBridge.setTitle({

            title: title,

        }).then((result) => { 
            console.log('####### enter ZWJSBridge result.  ##########');
            console.log(result);
        }).catch((error) => { 
            console.log('########  enter ZWJSBridge error. #########');
            console.log(error);
       });

       console.log('*******   exit setTitle() ***********')
    }

    // 设置菜单
    const setMenu = () =>{
        excuteBridge();
        console.log(' **** begin setMenu() ****');

            ZWJSBridge.setMenu({ 
            items: [
            {
                "id":"1", 
                "iconUrl":"https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E6%A0%87%E7%B4%A0%E6%9D%90%E5%BA%93&step_word=&hs=0&pn=7&spn=0&di=44880&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3547823153%2C2698103177&os=214013880%2C2692777001&simid=4265224204%2C651186723&adpicid=0&lpn=0&ln=1981&fr=&fmq=1614136839240_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F30%2F28e5298cbb8221577f916daaeab5d724.jpg%26refer%3Dhttp%3A%2F%2Fbpic.588ku.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1616728843%26t%3Dc66e902285f7573eac9d54ee60350e68&fromurl=ippr_z2C%24qAzdH3FAzdH3Flafij3t_z%26e3Bv54AzdH3Ff7vwtAzdH3F8cmdd0l9_z%26e3Bip4s&gsm=7&rpstart=0&rpnum=0&islist=&querylist=&force=undefined", 
                "text":"分享"
            }, 
            {
                "id":"2", 
                "iconUrl":"https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E6%A0%87%E7%B4%A0%E6%9D%90%E5%BA%93&step_word=&hs=0&pn=7&spn=0&di=44880&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3547823153%2C2698103177&os=214013880%2C2692777001&simid=4265224204%2C651186723&adpicid=0&lpn=0&ln=1981&fr=&fmq=1614136839240_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F30%2F28e5298cbb8221577f916daaeab5d724.jpg%26refer%3Dhttp%3A%2F%2Fbpic.588ku.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1616728843%26t%3Dc66e902285f7573eac9d54ee60350e68&fromurl=ippr_z2C%24qAzdH3FAzdH3Flafij3t_z%26e3Bv54AzdH3Ff7vwtAzdH3F8cmdd0l9_z%26e3Bip4s&gsm=7&rpstart=0&rpnum=0&islist=&querylist=&force=undefined",
                 "text":"订阅"
            }]
            }).then((data) => { 
                console.log(' #### ZWJSBridge.setMenu() log. ID：' + data.id +'####')
                console.log(data);
            }).catch((error) => { 
                console.log(' #### ZWJSBridge.setMenu() error. ####')
                console.log(error);
            });

            console.log('**** exit setMenu() ****');
    }

    //新开窗口
    const openNewWindow = () =>{
        excuteBridge();
        console.log('**** begin openNewWindow() **** address:   ' + address);

        ZWJSBridge.openLink({ 

            url: address

           }).then((result) => { 
               console.log('#### ZWJSBridge.openLink() log. ####');
               console.log(result);
             }).catch((error) => { 
                 console.log('#### ZWJSBridge.openLink() error. ####');
                 console.log(error);
             });

             console.log('**** exit openNewWindow() ****');
    }

    // 关闭新开窗口
    const closeNewWindow = () =>{
        excuteBridge();
        console.log('**** begin closeNewWindow() ****');

        ZWJSBridge.close().then((result) => 
                {
                    console.log('#### ZWJSBridge.close() log. ####');
                    console.log(result);
                }).catch((error) => { 
                    console.log('#### ZWJSBridge.close() error. ####');
                    console.log(error);
                });
                console.log('**** exit closeNewWindow() ****');
    }

  return (
    <View>
        <div>
        <h1 style={{textAlign:'center',color:'white'}}>5.欢迎来到窗口类页面</h1>

        <div>
          <h2>5.1  导航栏标题</h2>
          <h5 style={{textAlign:'justify',color:'blue'}}>请输入一个新窗口名称：</h5>
          <TextInput value={ title }
                     onChangeText={text => setNewTitle(text)}
                     style={{
                        width: 600,
                        height: 200,
                        borderWidth: 1,
                        borderColor: '#dddddd',
                        borderStyle: 'solid'
                    }}
          ></TextInput>
          <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
         </div>

          <button onClick={() => {setTitle()}}
                  style={{
                    width: 160,
                    height: 40,
                    backgroundColor: 'grey',
                    color: 'white',
                    fontSize: 8
                }}  
          >设置窗口标题</button>
        </div>

        <div>
            <h2>5.2  设置菜单</h2>
            <button onClick={() => {setMenu()}}
                    style={{
                        width: 160,
                        height: 40,
                        backgroundColor: 'grey',
                        color: 'white',
                        fontSize: 8
                    }}  
            >设置菜单</button>
        </div>

        <div>
            <h2>5.3  新开窗口</h2>
            <h5 style={{textAlign:'justify',color:'blue'}}>请输入一个http地址:</h5>
            <TextInput value={address}
                       onChangeText={text => setAdress(text)}
                       style={{
                        width: 600,
                        height: 200,
                        borderWidth: 1,
                        borderColor: '#dddddd',
                        borderStyle: 'solid'
                    }}
            ></TextInput>
            <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
            
            <button onClick={() => {openNewWindow()}}
                    style={{
                        width: 160,
                        height: 40,
                        backgroundColor: 'grey',
                        color: 'white',
                        fontSize: 8
                    }}  
            >点击前往</button>
        </div>

        <div>
            <h2>5.4  关闭窗口</h2>
            <button onClick={() => {closeNewWindow()}}
                    style={{
                        width: 160,
                        height: 40,
                        backgroundColor: 'grey',
                        color: 'white',
                        fontSize: 8
                    }}  
            >关闭窗口</button>
        </div>

      </div>
    </View>
  );
}

export default Window;
